查看原文
其他

3100+ Star!自动搜索补全的纯 JS 工具库

小秋 开源前哨 2021-03-06

【导语】:一个纯 JS 的轻量级自动补全工具库。

简介

autoComplete.js 是一个简单的、轻量级的、无其他依赖的 JS 自动补全工具库,它快速、功能丰富,并且可以与各种项目或系统无缝集成。它具有以下功能特性:

  • 纯JS语言编写
  • 无其他外部依赖
  • 简单易用
  • 轻量
  • 快速
  • 功能丰富
  • 高度可定制

项目地址:

https://github.com/TarekRaafat/autoComplete.js

安装

  • JSDELIVR CDN
// CSS文件
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@8.3.2/dist/css/autoComplete.min.css">

// JS文件
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@8.3.2/dist/js/autoComplete.min.js"></script>

  • cdnjs CDN
// CSS文件
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/8.3.2/css/autoComplete.min.css">

// JS文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/8.3.2/js/autoComplete.min.js"></script>
  • UNPKG CDN
// CSS文件
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/8.3.2/css/autoComplete.min.css">

// JS文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/8.3.2/js/autoComplete.min.js"></script>
  • HTML本地加载
<script src="./autoComplete.js"></script>
  • HTML本地ES6模块加载
<script src="./index.js" type="module"></script>
  • ES6导入
import autoComplete from "./autoComplete";
  • npm安装
npm i @tarekraafat/autocomplete.js
  • yarn安装
yarn add @tarekraafat/autocomplete.js
  • Node引用
const autoComplete = require("@tarekraafat/autocomplete.js/dist/js/autoComplete");

使用

  1. 将CSS放到HEAD标签内
<link rel="stylesheet" href="./css/autoComplete.css">
OR
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@8.3.2/dist/css/autoComplete.min.css">
  1. 将默认id值autoComplete分配给input元素或任何自定义的id/class,并在selector中选中自定义的元素。参考第4步
<input id="autoComplete" tabindex="1">    <!-- Default "id" value = "autoComplete"> -->
  1. 将autoComplete.js或个人的js文件放到BODY标签内
<script src="./js/autoComplete.min.js"></script>
<script src="./js/index.js"></script>
OR
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@8.3.2/dist/js/autoComplete.min.js"></script>
<script src="./js/index.js"></script>
  1. 创建autoComplete引擎示例,并添加配置
new autoComplete({
    data: {                              // Data src [Array, Function, Async] | (REQUIRED)
      src: async () => {
        // API key token
        const token = "this_is_the_API_token_number";
        // User search query
        const query = document.querySelector("#autoComplete").value;
        // Fetch External Data Source
        const source = await fetch(`https://www.food2fork.com/api/search?key=${token}&q=${query}`);
        // Format data into JSON
        const data = await source.json();
        // Return Fetched data
        return data.recipes;
      },
      key: ["title"],
      cache: false
    },
    query: {                             // Query Interceptor               | (Optional)
          manipulate: (query) => {
            return query.replace("pizza""burger");
          }
    },
    sort: (a, b) => {                    // Sort rendered results ascendingly | (Optional)
        if (a.match < b.match) return -1;
        if (a.match > b.match) return 1;
        return 0;
    },
    placeHolder: "Food & Drinks...",     // Place Holder text                 | (Optional)
    selector: "#autoComplete",           // Input field selector              | (Optional)
    observer: true,                      // Input field observer | (Optional)
    threshold: 3,                        // Min. Chars length to start Engine | (Optional)
    debounce: 300,                       // Post duration for engine to start | (Optional)
    searchEngine: "strict",              // Search Engine type/mode           | (Optional)
    resultsList: {                       // Rendered results list object      | (Optional)
        container: source => {
            source.setAttribute("id""food_list");
        },
        destination: "#autoComplete",
        position: "afterend",
        element: "ul"
    },
    maxResults: 5,                         // Max. number of rendered results | (Optional)
    highlight: true,                       // Highlight matching results      | (Optional)
    resultItem: {                          // Rendered result item            | (Optional)
        content: (data, source) => {
            source.innerHTML = data.match;
        },
        element: "li"
    },
    noResults: (dataFeedback, generateList) => {
        // Generate autoComplete List
        generateList(autoCompleteJS, dataFeedback, dataFeedback.results);
        // No Results List Item
        const result = document.createElement("li");
        result.setAttribute("class""no_result");
        result.setAttribute("tabindex""1");
        result.innerHTML = `<span style="display: flex; align-items: center; font-weight: 100; color: rgba(0,0,0,.2);">Found No Results for "${dataFeedback.query}"</span>`;
        document.querySelector(`#${autoCompleteJS.resultsList.idName}`).appendChild(result);
    },
    onSelection: feedback => {             // Action script onSelection event | (Optional)
        console.log(feedback.selection.value.image_url);
    }
});
  1. 属性配置信息
  • data:表示数据源,键,缓存和结果集,值为

    • 1-src:字符串或对象数组;或者返回字符串或对象数组的函数,Function() => {}
    • 2-key:如果src是对象,key是必须的,用于解析对象
    • 3-Cache:静态数据设置为true,动态数据设置为false
    • 4-Result:list,字符串或对象数据
  • query:查询拦截器

    • 只有一个方法manipulate,参数是查询的对象,拦截查询对象做个性化开发
  • sort:对结果集排序

    • 函数,对结果集排序,返回1,-1,0
  • selector:输入框选择器,选择需进行自动补全的元素:

    • id或class字符串
    • 或者一个查询返回html元素的函数
  • 以上只是列出了比较重要的几个配置属性,详细的说明参考官网

  1. 生命周期函数
  • init:初始化autoComplete引擎后触发
  • fetch:获取数据完成后触发
  • input:用户每次输入时触发
  • results:搜索完成准备就绪后触发
  • rendered:渲染结果列表后触发
  • navigation:在每个resultList结果交互上触发
  • unInit:初始化autoComplete引擎前触发
  1. 例子

官方提供了例子供参考,地址为:

https://tarekraafat.github.io/autoComplete.js/demo/

效果如下:

支持以下浏览器:



- EOF - 


更多优秀开源项目(点击下方图片可跳转)



开源前哨

日常分享热门、有趣和实用的开源项目。参与维护10万+star 的开源技术资源库,包括:Python, Java, C/C++, Go, JS, CSS, Node.js, PHP, .NET 等

关注后获取

回复 资源 获取 10万+ star 开源资源



分享、点赞和在看

支持我们分享更多优秀开源项目,谢谢!

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存